import React from 'react'
import { useLocation, useParams, useSearchParams } from 'react-router-dom'

export default function MessageDetail() {
  /* 
  读取params参数: useParams
  */
  const {id, title, content} = useParams()

   /* 
  读取query参数: useSearchParams
  */
  const [search, setSearch] = useSearchParams()
  const id2 = search.get('id2')
  const title2 = search.get('title2')
  const content2 = search.get('content2')

  /* 
  读取state参数
  */
 const location = useLocation()
 console.log(location)
 const {state} = location

  return (
    <div>
      <h3>params参数</h3>
      <ul>
        <li>id: {id}</li>
        <li>title: {title}</li>
        <li>content: {content}</li>
      </ul>
      <h3>query参数</h3>
      <ul>
        <li>id2: {id2}</li>
        <li>title2: {title2}</li>
        <li>content2: {content2}</li>
      </ul>
      <button onClick={()=>setSearch('id2=008&title2=哈哈&content2=嘻嘻')}>更新参数</button>
      <h3>state参数</h3>
      <ul>
        <li>id: {state.id}</li>
        <li>title: {state.title}</li>
        <li>content: {state.content}</li>
      </ul>
    </div>
  )
}
